<template>
  <transition>
    <div id="login" v-if="!isJialianEnter">
      <div class="center">
        <div class="content">
          <div class="title">联动营销云</div>
          <login-way-switcher v-model:login-way="loginWay"></login-way-switcher>
          <account-password-login v-if="loginWay === 'account_password'" @login="handleLogin"></account-password-login>
          <qrcode-login v-if="loginWay == 'qrcode' && showQrcode" class="qr-code-login"
            @login="handleLogin"></qrcode-login>
        </div>
      </div>
    </div>
    <div id="login-jialian" v-else>
      <div class="center">
        <div class="center-left">
          <img src="@/assets/login/login-left.png" alt="">
        </div>
        <div class="center-right">
          <div class="content-right">
            <div class="title">欢迎使用数智营销管理系统</div>
            <login-way-switcher v-model:login-way="loginWay"></login-way-switcher>
            <account-password-login v-if="loginWay === 'account_password'" @login="handleLogin"></account-password-login>
            <qrcode-login v-else class="qr-code-login" @login="handleLogin"></qrcode-login>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script lang="ts" setup>
import { Ref } from "vue";
import { ISessionUser } from "@/api/modules/login";
import { TLoginWay } from "@/views/passport/types/login";
import AccountPasswordLogin from "@/views/passport/components/AccountPasswordLogin.vue";
import LoginWaySwitcher from "@/views/passport/components/LoginWaySwitcher.vue";
import QrcodeLogin from "@/views/passport/components/QrcodeLogin.vue";
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import { useWebSocket } from "@/compositions/notice/useWebSocket";
const {initWebSocket,close}=useWebSocket()

const router = useRouter();
const route = useRoute();
const store = useStore();
const isJialianEnter = ref(false);

const loginWay: Ref<TLoginWay> = ref("qrcode");

const handleLogin = (userInfo: ISessionUser) => {
  store.dispatch("login", userInfo)
  store.commit("CLEARBOOKLIST");
  store.commit("SETTOKEN", userInfo.token);
  store.commit('SETINSID', userInfo.insId)
  store.commit('SETGLOBALINSID', userInfo.insId)
  store.commit("SETUSERNAME", userInfo.username);
  store.commit("SETALLPERMISSION", userInfo.allPermission);
  store.commit("SETMERCHANTID", userInfo.merchantId);
  store.commit("SETUERID", userInfo.userId);
  store.commit("SETADMINTYPE", userInfo.adminType);
  store.commit("SETUSERINFO", { insId: userInfo.insId });
  store.commit("SETBINDWX", userInfo.bindWx)
  store.commit("SETBINDWXPROMPTSTATUS", userInfo.bindWxPromptStatus)
  //websocket
  initWebSocket()
  // store.commit("SETSECRET", userInfo.secret)
  // store.commit("SETSECRETENABLED", userInfo.secretEnabled)

  if (route.query.redirectUrl) {
    const toPath = decodeURIComponent(route.query.redirectUrl as string);
    store.commit("SETCURRENTSERVICE", toPath.split("/")[1].toUpperCase());
    router.replace(decodeURIComponent(route.query.redirectUrl as string));
    store.commit("SETBOOKLIST", {
      path: decodeURIComponent(route.query.redirectUrl as string),
      service: store.state.user.currentService,
    });
  } else {
    store.commit("SETCURRENTSERVICE", userInfo.currentService);
    const temp = userInfo.allPermission.filter((i: any) => {
      return i.serviceType == userInfo.currentService;
    })[0];
    if (temp && temp.permissionLayer && temp.permissionLayer.length > 0) {
      if (temp.permissionLayer[0].type == "NODE") {
        router.push(temp.permissionLayer[0].children[0].frontRouter);
        store.commit("SETBOOKLIST", {
          path: temp.permissionLayer[0].children[0].frontRouter,
          service: store.state.user.currentService,
        });
      } else if (temp.permissionLayer[0].type == "PAGE") {
        router.push(temp.permissionLayer[0].frontRouter);
        store.commit("SETBOOKLIST", {
          path: temp.permissionLayer[0].frontRouter,
          service: store.state.user.currentService,
        });
      }
      getUploadConfigData();
    } else {
      const path = sessionStorage.getItem('loginPath') || '/login'
      router.push(path);
    }
  }
};

// 获取上传的配置
const getUploadConfigData = async () => {
  // let rs = await getUploadConfig()
  // if(rs.code === 200) {
  //   store.commit('SETMINIO', encodeURIComponent(encodeURIComponent(JSON.stringify(rs.payload))))
  // }
};

// 判断当前路由
const beforeRouteEnter = () => {
  if (window.location.href.indexOf('yxqy.jlpay.com') != -1) {
    isJialianEnter.value = true;
    // console.log('panduan 当前路由1')
  } else {
    isJialianEnter.value = false;
    // console.log('panduan 当前路由2')
  }
}

const showQrcode = ref(false)

//处理登录页
const handleLoginPage = () => {
  if (route.meta.modeType == 'input') {
    showQrcode.value = false
    loginWay.value = 'account_password'
  } else {
    showQrcode.value = true
    loginWay.value = 'qrcode'
  }
  //存储登录页
  store.commit('SETLOGINPATH', route.fullPath)
  sessionStorage.removeItem('loginPath')
  sessionStorage.setItem('loginPath', route.fullPath)
}

onBeforeMount(async () => {
  handleLoginPage()
  beforeRouteEnter()
  await close()
});
</script>

<style lang="scss" scoped>
#login {
  position: relative;
  height: 100%;
  margin: auto;
  background: #091c25 url(@/assets/login/backgroud.png) center center no-repeat;
  background-size: auto 100%;
  overflow: auto;

  @media only screen and (min-aspect-ratio:16/9) {
    background-size: 100% auto;
  }

  .center {
    position: relative;
    max-width: 1200px;
    height: 100vh;
    margin: 0 auto;
  }

  .content {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -250px;
    width: 500px;
    background: #ffffff;
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 30px;

    @media screen and (max-width: 1200px) {
      right: auto;
      left: 50%;
      margin-left: -250px;
    }

    .title {
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 30px;
      font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
      font-weight: 500;
      color: #1964fa;
      margin-bottom: 20px;
    }
  }
}

#login-jialian {
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  background: #091c25 url(@/assets/login/backgroud-jialian.png) center center no-repeat;
  background-size: 100% 100%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  padding: 8% 11.2%;
  box-sizing: border-box;

  @media only screen and (min-aspect-ratio:16/9) {
    background-size: 100% 100%;
  }

  .center {
    background: #ffffff;
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    min-height: 540px;

    &-left {
      flex: 1;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-right {
      flex-shrink: 0;
      width: 63.1%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content-right {
      width: 100%;
      height: 100%;
      padding: 9.2% 24%;
      box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      box-sizing: border-box;

      .title {
        text-align: center;
        // height: 50px;
        line-height: 50px;
        font-size: 30px;
        font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
        font-weight: 500;
        color: #000;
        margin-bottom: 20px;
      }

    }
  }

  .content {
    width: 550px;
    background: #ffffff;
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 30px;

    @media screen and (max-width: 1200px) {
      right: auto;
      left: 50%;
      margin-left: -250px;
    }

    .title {
      text-align: center;
      // height: 50px;
      line-height: 50px;
      font-size: 30px;
      font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
      font-weight: 500;
      color: #000;
      margin-bottom: 20px;
    }
  }
}
</style>
